<template>
	<el-descriptions class="project_descriptions" :column="4" border>
		<el-descriptions-item label="课题编号">{{ data.filed1 }}</el-descriptions-item>
		<el-descriptions-item label="课题名称" :span="2">{{ data.name }}</el-descriptions-item>
		<el-descriptions-item label="申请人">{{ data.createName }}</el-descriptions-item>
		<el-descriptions-item label="测量技术" :span="4">
			<el-tag size="medium" v-for="(item, index) in measureData" :key="index" disable-transitions>{{ item }}</el-tag>
		</el-descriptions-item>
		<el-descriptions-item label="研究领域" :span="sectorData.type === 2 ? 4 : 3">{{ sectorData.label }}</el-descriptions-item>
		<el-descriptions-item label="二级领域" :span="1" v-if="sectorData.type === 1">{{ sectorData.two }}</el-descriptions-item>
		<el-descriptions-item label="课题PI" :span="4">
			<el-tag size="medium" v-for="(item, index) in piListData" :key="index" disable-transitions>{{ item }}</el-tag>
		</el-descriptions-item>
	</el-descriptions>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {};
	},
	computed: {
		...mapGetters(['siteConfig', 'principalData']),
		measureData() {
			let datas = this.data.measureList || [];
			let mapDatas = datas.map((item) => item.piId);
			return mapDatas.filter((item) => !!item);
		},
		sectorData() {
			let sector = this.data.sector;
			let sectorArr = this.siteConfig.filter((n) => n.type === '1');
			let sectorTree = this.$flatToTree(sectorArr, 'pid');
			let sectorObject = sectorTree.find((n) => n.name === sector);
			if (!sectorObject) {
				return { type: 0, label: sector };
			} else if (!!this.data.filed4) {
				return { type: 1, label: sectorObject.name, two: this.data.filed4 };
			} else {
				return { type: 2, label: sectorObject.name };
			}
		},
		surplusHour() {
			let useHour = Number(this.data.userHour || '0');
			let machineHour = Number(this.data.machineHour || '0');
			return machineHour - useHour;
		},
		piListData() {
			let datas = this.data.piList || [];
			let mapDatas = datas.map((item) => {
				let info = this.principalData.find((n) => n.id === item.piId);
				return !info ? '' : info.userName;
			});
			return mapDatas.filter((n) => !!n);
		}
	}
};
</script>

<style lang="scss" scoped>
.project_descriptions::v-deep {
	width: 100%;
	.el-descriptions-item__cell {
		font-size: 16px;
		padding: 7px 12px;
	}
	.el-descriptions-item__label {
		color: #606266;
		line-height: 28px;
		font-weight: bold;
		width: 100px;
	}
	.el-descriptions-item__content {
		.el-tag {
			font-size: 14px;
			margin: 5px 0 5px 10px;
			&:first-child {
				margin-left: 0;
			}
		}
	}
}
</style>
